<template>
  <div style="width: 70%; margin: 20px auto">
    <el-card style="width: 100%">
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <h2>申请记录</h2>
        <div
          style="display: flex; align-items: center; justify-content: flex-end"
        >
          <el-select
            v-model="searchForm.mattersId"
            placeholder="请选择事务"
            style="width: 240px"
            :default-Value="0"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input
            v-model="searchForm.keyword"
            style="width: 300px; margin-left: 20px"
            placeholder="请搜索申请人姓名/身份证号"
          >
            <template #append>
              <el-button :icon="Search" @click="getApplyList" />
            </template>
          </el-input>
        </div>
      </div>
      <div style="margin-top: 20px">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="realName" label="申请人" width="180" />
          <el-table-column prop="identityCard" label="身份证号" />
          <el-table-column prop="phone" label="联系电话" />
          <el-table-column prop="address" label="申请事项">
            <template #default="scope">
              {{
                options.find((item) => item.value == scope.row.mattersId)
                  ? options.find((item) => item.value == scope.row.mattersId)
                      .label
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column prop="applyTime" label="申请时间" />
          <el-table-column prop="address" label="状态">
            <template #default="scope">
              <el-tag type="success" round v-if="scope.row.status == '审批通过'"
                >已通过</el-tag
              >
              <el-tag
                type="danger"
                round
                v-if="scope.row.status == '审批不通过'"
                >未通过</el-tag
              >
              <el-button
                v-if="scope.row.status == '待审批'"
                @click="sp(scope.row)"
                >审批</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="look(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: 20px; display: flex; justify-content: flex-end">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          v-model:current-page="searchForm.page"
          :pageSize="searchForm.pageSize"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <el-dialog v-model="dialogVisible" title="" width="600">
      <div>
        <h1>申请信息查看</h1>
        <el-row style="margin: 20px 0">
          <el-col :span="12">
            <div>申请人姓名</div>
            <div style="color: black">{{ select.realName }}</div>
          </el-col>
          <el-col :span="12">
            <div>身份证号</div>
            <div style="color: black">{{ select.identityCard }}</div>
          </el-col>
        </el-row>
        <el-row style="margin: 20px 0">
          <el-col :span="12">
            <div>联系电话</div>
            <div style="color: black">{{ select.phone }}</div>
          </el-col>
          <el-col :span="12">
            <div>服役年限</div>
            <div style="color: black">{{ select.serviceYears }}</div>
          </el-col>
        </el-row>
        <el-row style="margin: 20px 0">
          <el-col :span="12">
            <div>退休日期</div>
            <div style="color: black">
              {{ select.retireDate }}
            </div>
          </el-col>
          <el-col :span="12">
            <div>退役军衔</div>
            <div style="color: black">{{ select.retireRank }}</div>
          </el-col>
        </el-row>
        <el-row style="margin: 20px 0">
          <el-col :span="24">
            <div>现居住地址</div>
            <div style="color: black">{{ select.habitation }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>申请时间</div>
            <div style="color: black">{{ select.applyTime }}</div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <div>
          <h1>申请表附件</h1>
          <div style="margin: 20px 0">
            <div
              style="
                border-radius: 10px;
                background-color: #efefef;
                padding: 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <div style="display: flex; align-items: center">
                <el-icon size="20px"><Files /></el-icon>
                <h3 style="margin-left: 10px">附件</h3>
              </div>
              <div>
                <el-link :href="select.applyForm">下载</el-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="outerVisible" title="审批" width="500">
      <span>是否通过本条申请</span>

      <el-dialog
        v-model="innerVisible2"
        width="500"
        title="不通过原因填写"
        append-to-body
      >
        <el-input v-model="applyOkForm.reason"></el-input>
        <template #footer>
          <div class="dialog-footer">
            <el-button
              @click="
                () => {
                  innerVisible2 = false;
                  applyOkForm.reason = '';
                  applyOkForm.status = '审批通过';
                }
              "
              >返回</el-button
            >
            <el-button type="primary" @click="applyOk"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            @click="
              innerVisible2 = true;
              applyOkForm.status = '审批不通过';
            "
            >不通过</el-button
          >
          <el-button type="primary" @click="applyOk"> 通过 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reqGetTaskList, reqApplyTaskList, reqApplyTaskSp } from "@/api/api";
import { Search, Files } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
const options = ref([]);
const tableData = ref([]);
const total = ref(0);
const searchForm = ref({
  mattersId: 0,
  keyword: "",
  page: 1,
  pageSize: 10,
});
const select = ref();
const dialogVisible = ref(false);
const outerVisible = ref(false);
const innerVisible2 = ref(false);
const applyOkForm = ref({
  id: 0,
  status: "审批通过",
  mattersName: "审批",
  reason: "",
  userId: "",
});

/**获取事务列表 */
const getTaskList = async () => {
  const res = await reqGetTaskList({
    page: 1,
    pageSize: 99,
    keyword: "",
  });
  if (res.code === 200) {
    options.value = res.data.records.map((item) => {
      return { label: item.name, value: item.id };
    });
    /**数组前插入 */
    options.value.unshift({ label: "全部", value: 0 });

    // total.value = res.data.totalRow;
  } else {
    ElMessage.error(res.msg);
  }
};

const sp = (item) => {
  applyOkForm.value.id = item.id;
  applyOkForm.value.userId = item.userId;
  applyOkForm.value.mattersName = options.value.find(
    (item1) => item1.value == item.mattersId
  )
    ? options.value.find((item2) => item2.value == item.mattersId).label
    : "";
  outerVisible.value = true;
};

const getApplyList = async () => {
  const res = await reqApplyTaskList(searchForm.value);
  if (res.code === 200) {
    tableData.value = res.data.records;
    total.value = res.data.totalRow;
  } else {
    ElMessage.error(res.msg);
  }
};

const applyOk = async () => {
  console.log(applyOkForm.value);
  const res = await reqApplyTaskSp(applyOkForm.value);
  if (res.code === 200) {
    outerVisible.value = false;
    innerVisible2.value = false;
    ElMessage.success("审批成功");
    getApplyList();
  } else {
    ElMessage.error(res.msg);
  }
};

/**页码改变 */
const pageChange = () => {
  getApplyList();
};

const look = (item) => {
  select.value = item;
  dialogVisible.value = true;
};

onMounted(async () => {
  await getTaskList();
  await getApplyList();
});
</script>

<style lang="scss" scoped></style>
